<script setup lang="ts">
import { ref } from 'vue'
import SmallSearch from '@/components/common/smallSearch.vue'
import SearchKeywords from '@/components/common/searchKeywords.vue'
import Diary from '@/components/diary/diary.vue'
// 搜索内容
const searchTerm = ref<string>('');
const getSearchTerm = (term: string) => {
  searchTerm.value = term;
}

</script>

<template>
  <div class="flex flex-col justify-center items-center">
    <!-- 头部 -->
    <SmallSearch @search="getSearchTerm"/>
    <!-- 搜索词提示 -->
    <SearchKeywords :searchTerm="searchTerm" @cancelSearch="getSearchTerm" />
    <!-- 内容 -->
    <Diary :page-size="4" :searchTerm="searchTerm"/>


</div>
</template>

<style scoped>

</style>
